fix(a11y): name and state for dark-mode toggle button#10848
Open
bmatar wants to merge 1 commit intoswagger-api:masterfrom
Open
fix(a11y): name and state for dark-mode toggle button#10848bmatar wants to merge 1 commit intoswagger-api:masterfrom
bmatar wants to merge 1 commit intoswagger-api:masterfrom
Conversation
The Standalone topbar's dark-mode toggle button has no accessible name and no announced state. Screen readers announce only "button" when the user lands on it, with no indication of what it controls or which mode is currently active. The lightbulb / lightbulb-off SVG that conveys state visually is not exposed to AT. Adds: - aria-label="Dark mode" so the button has a stable accessible name describing what it controls (per the WAI-ARIA APG toggle button pattern, the name does not flip with state). - aria-pressed reflecting isDarkMode so AT users hear the toggle's current pressed/not-pressed state. - aria-hidden="true" on the inner SVG so caret-nav / browse-mode navigation doesn't surface the SVG path as a separate stop. Refs swagger-api#7350
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The Standalone topbar's dark-mode toggle button has no accessible name and no announced state. Screen readers announce only "button" when the user lands on it, with no indication of what it controls or which mode is currently active. The
lightbulb/lightbulb-offSVG that conveys state visually is not exposed to AT, so the visual signal has no AT equivalent.This PR adds:
aria-label="Dark mode"aria-pressedreflectingisDarkModeso AT users hear the toggle's current state.aria-hidden="true"on the inner SVG so caret-nav / browse-mode navigation doesn't surface the SVG path as a separate stop.Motivation and Context
Part of the accessibility backlog. Detected by Tactual. WCAG 4.1.2 Name, Role, Value.
Refs #7350 (umbrella accessibility issue).
How Has This Been Tested?
npm run test:unit— all suites pass (829 tests)npm run build— cleanComputed-attribute snapshot via Playwright on the running build (master vs this branch):
NVDA announcement (verified in Chrome):
No visual change; this PR is ARIA-only.
Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests